<template>
  <div class="map-wrap">
    <div class="wu-chart" ref="mapRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import chinaJson from './map/china.json'

const mapRef = ref()
const option: echarts.EChartOption = {
  // geo: {
  // }
}
const getHighlightStyle = () => {
  return {
    label: {
      show: true,
      color: '#fff'
    },
    itemStyle: {
      borderColor: '#0bccde',
      areaColor: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#083885' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#298db5' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    }
  }
}
const flyLineData = [
  {
    fromName: '北京',
    toName: '上海',
    coords: [
      [116.4551, 40.2539],
      [121.4648, 31.2891]
    ]
  },
  {
    fromName: '上海',
    toName: '北京',
    coords: [
      [121.4648, 31.2891],
      [116.4551, 40.2539]
    ]
  },
  {
    fromName: '北京',
    toName: '广州',
    coords: [
      [116.4551, 40.2539],
      [113.5107, 23.2196]
    ]
  },
  {
    fromName: '广州',
    toName: '北京',
    coords: [
      [113.5107, 23.2196],
      [116.4551, 40.2539]
    ]
  },
  {
    fromName: '北京',
    toName: '成都',
    coords: [
      [116.4551, 40.2539],
      [103.9526, 30.7617]
    ]
  },
  {
    fromName: '成都',
    toName: '北京',
    coords: [
      [103.9526, 30.7617],
      [116.4551, 40.2539]
    ]
  },
  {
    fromName: '成都',
    toName: '新疆维吾尔自治区',
    coords: [
      [103.9526, 30.7617],
      [85.294711, 41.371801]
    ]
  },
  {
    fromName: ' 新疆维吾尔自治区',
    toName: '成都',
    coords: [
      [85.294711, 41.371801],
      [103.9526, 30.7617]
    ]
  }
]
const planePath =
  'path://M563.4 623.8c0.8-13.8 16.6-9 16.6-9l124 25.2 256 97.4c0-48-7.6-53-18.8-61.4L576 414c0 0-9.8-120-9.8-225.8 0-49-23.6-156.2-54.2-156.2s-54.2 108.8-54.2 156.2c0 100.4-9.8 225.8-9.8 225.8L82.8 676c-14.2 10-18.8 15.4-18.8 61.4L320 640l123.8-25.2c0 0 15.8-4.8 16.6 9 0.8 13.8-2.4 138.2 11.8 204.2 1.8 8.8-5 9.4-9.6 14.8l-103.8 65.6c-3.4 3.8-5 14.6-5 14.6l-2 37 136-32 24 64 24-64 136 32-2-37c0.2 0-1.4-10.8-4.8-14.6l-103.8-65.6c-4.6-5.4-11.4-6-9.6-14.8C565.4 762 562.6 637.6 563.4 623.8z'
onMounted(() => {
  const wuChart = echarts.init(mapRef.value)
  echarts.registerMap('china', { geoJSON: chinaJson })
  wuChart.setOption({
    // grid: {
    //   left: 0,
    //   right: 0,
    //   bottom: 10
    // },
    geo: [
      {
        map: 'china',
        show: true,
        top: 20,
        left: 360,
        center: [116.4551, 40.2539],
        roam: true,
        zoom: 1.5,
        label: {
          show: true,
          color: '#fff'
        },
        itemStyle: {
          borderColor: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: '#00F6FF' },
              { offset: 1, color: '#87ADCB' }
            ],
            false
          ),
          shadowColor: 'rgba(10,76,139,0.7)',
          shadowOffsetY: 0,
          shadowBlur: 60,
          areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.2,
                color: '#073684' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#061e40' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        emphasis: {
          ...getHighlightStyle()
        },
        select: {
          ...getHighlightStyle()
        }
      }
    ],
    series: [
      {
        type: 'lines',
        map: 'china',
        polyline: true,
        coordinateSystem: 'geo',
        data: flyLineData,
        effect: {
          show: true,
          symbol: planePath,
          symbolSize: 15,
          period: 6,
          color: '#fff',
          trailLength: 0
        },
        lineStyle: {
          width: 1,
          opacity: 0.6,
          color: 'skyblue',
          type: 'solid',
          curveness: 0.2
        }
      }
    ]
  })
  wuChart.setOption(option)
})
</script>

<style lang="scss" scoped>
.map-wrap {
  height: 100%;
}

.wu-chart {
  height: 100%;
}
</style>
